.statistics-page {
  background: #dfe7f0;
  padding-bottom: 78px;
  .statistics-content {
    .statistics-header {
      .statistics-header-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 180px;
        background: linear-gradient(
          to bottom,
          #00a3ff 0%,
          #00a3ff 10%,
          #ffffff 100%
        );
        .statistics-header-title-left {
          flex: 1;
          height: 100%;
          padding: 30px 0px 0px 24px;
          .statistics-header-title-left-top {
            font-size: 24px;
            line-height: 1em;
            text-shadow: -2px -2px 0 #ffffff, 2px -2px 0 #ffffff,
              -2px 2px 0 #ffffff, 2px 2px 0 #ffffff, -1px -1px 0 #ffffff,
              1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
            display: inline-block;
            .statistics-header-title-left-top-left {
              color: #073a9d;
              font-weight: 600;
              padding-right: 4px;
            }
            .statistics-header-title-left-top-right {
              color: #0083e4;
              font-weight: 600;
            }
          }
          .statistics-header-title-left-footer {
            padding-top: 16px;
            font-size: 12px;
            line-height: 1em;
            color: #000;
          }
        }
        .statistics-header-title-right {
          font-size: 16px;
          flex: 1;
          height: 100%;
          background-image: url(@/assets/images/staticBackground.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          position: relative;
          top: -20px;
          img {
            width: 50%;
            height: 50%;
            object-fit: contain;
            position: absolute;
            top: 0;
            right: 20px;
            bottom: 0;
            margin: auto;
          }
        }
      }
    }
  }

  .total-card {
    background-color: #fffefa;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin: 0px 24px;
    position: relative;
    top: -78px;
    border: 1px solid #00a3ff;
    overflow: hidden;
    .total-card-title {
      height: 24px;
      width: 100%;
      background: linear-gradient(
        to bottom,
        #bee5fd 0%,
        #eaf6fb 80%,
        #ffffff 100%
      );
    }
    .total-card-box {
      padding: 0px 16px 0px 16px;
      .total-card-box-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .total-card-box-title-left {
          font-size: 18px;
          font-weight: 800;
          color: #0d388d;
          background-image: url(@/assets/images/zhishi.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          height: 32px;
        }
        .total-card-box-title-right {
          font-size: 12px;
          color: #00a3ff;
          margin-left: 16px;
          background-image: url(@/assets/images/img_wf.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          padding: 4px 8px;
          flex: 1;
        }
      }
    }

    .total-card-box-title-right-echarts {
      height: 280px;
      width: 100%;
      box-sizing: border-box;
    }
    .divider {
      height: 1px;
      width: 100%;
      background: #f0f0f0;
      margin: 16px 0;
      margin-bottom: 40px;
    }

    .latest-save-money {
      color: #383838;
      font-size: 12px;
      line-height: 1;
      font-weight: 800;
      padding-left: 18px;
      margin-bottom: 8px;
    }
  }

  .ranking-card {
    background-color: #fffefa;
    position: relative;
    top: -54px;
    margin: 0px 24px;
    border-radius: 12px;
    padding: 12px 0px;
    .ranking-card-title {
      height: 23px;
      width: 115px;
      margin: 0px auto;
      background: url(@/assets/images/back.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      padding-left: 16px;
      font-size: 14px;
      color: #00a3ff;
      line-height: 13px;
      font-weight: 800;
      span {
        position: relative;
        top: 3px;
        left: 6px;
      }
    }
    & > img {
      right: 0px;
      position: absolute;
      top: -10px;
    }
  }

  // 底部导航
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #f0f0f0;
    display: flex;
    padding: 8px 0;
    background: #ffffff;
    border-radius: 15px 15px 0px 0px;
    box-sizing: border-box;
    height: 78px;
    // 确保在iOS Safari中正确显示
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      // padding: 8px;
      color: #999;
      &.active {
        color: #1890ff;
        .nav-icon {
          color: #1890ff;
        }
      }
      .nav-icon {
        margin-bottom: 4px;
      }

      span {
        font-size: 12px;
      }
    }
  }
}
